<script setup>
import HelloWorld from './components/HelloWorld.vue'
import HorizontalBar from './components/HorizontalBar.vue';
import RadarBar from './components/RadarBar.vue';
import Relation from './components/Relation.vue';
import TotalData from './components/TotalData.vue';
import MapChart from './components/MapChart.vue';
import VerticalBar from './components/VerticalBar.vue';
import RingBar from './components/RingBar.vue';
import WordCloud from './components/WordCloud.vue';

import { ref } from 'vue'

import { getVisualization } from './api/visualization';

const data = ref(null)

const loadData = async () => {
  // data.value = await getVisualization()
  data.value = {
    regionData: [
      {id: 1, name: '华北', value: 63},
      {id: 2, name: '华南', value: 34},
      {id: 3, name: '华东', value: 56},
      {id: 4, name: '中南', value: 42},
      {id: 5, name: '西南', value: 67},
      {id: 6, name: '西北', value: 86}
    ],
    serversData: [
      {id: 1, name: '服务1', value: 78},
      {id: 2, name: '服务2', value: 66},
      {id: 3, name: '服务3', value: 56},
      {id: 4, name: '服务4', value: 80},
      {id: 5, name: '服务5', value: 67},
      {id: 6, name: '服务6', value: 56}
    ],
    risksData: [
      {id: 1, name: '华北', value: 63},
      {id: 2, name: '华北', value: 34},
      {id: 3, name: '华东', value: 56},
      {id: 4, name: '中南', value: 42},
      {id: 5, name: '西南', value: 67},
      {id: 6, name: '西北', value: 86}
    ],
    eventData: [
      {id: 1, name: '华北', value: 163},
      {id: 2, name: '华南', value: 134},
      {id: 3, name: '华东', value: 156},
      {id: 4, name: '中南', value: 142},
      {id: 5, name: '西南', value: 167},
    ],
    wordCloudData: [
      {id: 0, name: '华为', value: 200},
      {id: 1, name: '小米', value: 163},
      {id: 2, name: '红米', value: 134},
      {id: 3, name: '荣耀', value: 180},
      {id: 4, name: '苹果', value: 142},
      {id: 5, name: 'vivo', value: 167},
      {id: 6, name: 'iphone', value: 68},
      {id: 7, name: 'OPPO', value: 120},
      {id: 8, name: 'SAMSUNG', value: 100},
      {id: 9, name: 'ONEPLUS', value: 100},
      {id: 10, name: '可爱', value: 167},
      {id: 11, name: '端庄', value: 68},
      {id: 12, name: '大方', value: 120},
      {id: 13, name: '冰雪聪明', value: 100},
      {id: 14, name: '幽默风趣', value: 100},
      {id: 15, name: '楚楚动人', value: 167},
      {id: 16, name: '王者气质', value: 68},
      {id: 17, name: '文武双全', value: 120},
      {id: 18, name: '善解人意', value: 100},
      {id: 19, name: '天人合一', value: 100},
    ],
    relationData: [
      {
        id: 0,
        name: '数据中心',
        source: '数据中心',
        speed: 219,
        target: '数据中心',
        value: [50, 200]
      },
      {
        id: 1,
        name: '上级平台1',
        source: '上级平台1',
        speed: 96,
        target: '数据中心',
        value: [0, 300]
      },
      {
        id: 2,
        name: '上级平台2',
        source: '上级平台2',
        speed: 123,
        target: '数据中心',
        value: [0, 100]
      },
      {
        id: 3,
        name: '子级平台1',
        source: '数据中心',
        speed: 117,
        target: '子级平台1',
        value: [100, 100]
      },
      {
        id: 4,
        name: '子级平台2',
        source: '数据中心',
        speed: 196,
        target: '子级平台2',
        value: [100, 300]
      }
    ],
    totalData: {
      db: '65446',
      hb: '87788',
      hd: '76546',
      total: '6783838',
      xb: '75757',
      xn: '74234',
      zn: '42134'
    },
    voltageLevel:['2019', '2020', '2021', '2022', '2023', '2024'],
    categoryData: {
      '2019': [
        {id: 0, name: '山西', value: 200},
        {id: 1, name: '内蒙古', value: 163},
        {id: 2, name: '浙江', value: 134},
        {id: 3, name: '江苏', value: 180},
        {id: 4, name: '四川', value: 142},
        {id: 5, name: '湖北', value: 167},
        {id: 6, name: '湖南', value: 68},
        {id: 7, name: '山东', value: 120},
        {id: 8, name: '云南', value: 100},
        {id: 9, name: '哈尔冰', value: 100},
        {id: 10, name: '西藏', value: 167},
        {id: 11, name: '新疆', value: 68},
        {id: 12, name: '宁夏', value: 120},
        {id: 13, name: '河南', value: 100},
        {id: 14, name: '河北', value: 100},
        {id: 15, name: '北京', value: 167},
        {id: 16, name: '辽宁', value: 168},
        {id: 17, name: '上海', value: 120},
        {id: 18, name: '天津', value: 150},
        {id: 19, name: '厦门', value: 190},
        {id: 20, name: '香港', value: 150},
        {id: 21, name: '安徽', value: 190},
        {id: 22, name: '福建', value: 150},
        {id: 23, name: '广东', value: 190},
        {id: 24, name: '广西', value: 110},
        {id: 25, name: '青海', value: 120},
        {id: 26, name: '甘肃', value: 110}
      ],
      '2020': [
        {id: 0, name: '山西', value: 210},
        {id: 1, name: '内蒙古', value: 169},
        {id: 2, name: '浙江', value: 194},
        {id: 3, name: '江苏', value: 120},
        {id: 4, name: '四川', value: 142},
        {id: 5, name: '湖北', value: 167},
        {id: 6, name: '湖南', value: 168},
        {id: 7, name: '山东', value: 190},
        {id: 8, name: '云南', value: 130},
        {id: 9, name: '哈尔冰', value: 120},
        {id: 10, name: '西藏', value: 167},
        {id: 11, name: '新疆', value: 168},
        {id: 12, name: '宁夏', value: 120},
        {id: 13, name: '河南', value: 150},
        {id: 14, name: '河北', value: 180},
        {id: 15, name: '北京', value: 167},
        {id: 16, name: '辽宁', value: 168},
        {id: 17, name: '上海', value: 120},
        {id: 18, name: '天津', value: 150},
        {id: 19, name: '厦门', value: 190},
        {id: 20, name: '香港', value: 150},
        {id: 21, name: '安徽', value: 190},
        {id: 22, name: '福建', value: 150},
        {id: 23, name: '广东', value: 190},
        {id: 24, name: '广西', value: 110},
        {id: 25, name: '青海', value: 120},
        {id: 26, name: '甘肃', value: 120}
      ],
      '2021': [
        {id: 0, name: '山西', value: 210},
        {id: 1, name: '内蒙古', value: 169},
        {id: 2, name: '浙江', value: 194},
        {id: 3, name: '江苏', value: 120},
        {id: 4, name: '四川', value: 142},
        {id: 5, name: '湖北', value: 167},
        {id: 6, name: '湖南', value: 168},
        {id: 7, name: '山东', value: 190},
        {id: 8, name: '云南', value: 130},
        {id: 9, name: '哈尔冰', value: 120},
        {id: 10, name: '西藏', value: 167},
        {id: 11, name: '新疆', value: 168},
        {id: 12, name: '宁夏', value: 120},
        {id: 13, name: '河南', value: 150},
        {id: 14, name: '河北', value: 180},
        {id: 15, name: '北京', value: 167},
        {id: 16, name: '辽宁', value: 168},
        {id: 17, name: '上海', value: 120},
        {id: 18, name: '天津', value: 150},
        {id: 19, name: '厦门', value: 190},
        {id: 20, name: '香港', value: 150},
        {id: 21, name: '安徽', value: 190},
        {id: 22, name: '福建', value: 150},
        {id: 23, name: '广东', value: 190},
        {id: 24, name: '广西', value: 110},
        {id: 25, name: '青海', value: 120},
        {id: 26, name: '甘肃', value: 130}
      ],
      '2022': [
        {id: 0, name: '山西', value: 120},
        {id: 1, name: '内蒙古', value: 169},
        {id: 2, name: '浙江', value: 194},
        {id: 3, name: '江苏', value: 120},
        {id: 4, name: '四川', value: 142},
        {id: 5, name: '湖北', value: 197},
        {id: 6, name: '湖南', value: 168},
        {id: 7, name: '山东', value: 190},
        {id: 8, name: '云南', value: 130},
        {id: 9, name: '哈尔冰', value: 170},
        {id: 10, name: '西藏', value: 167},
        {id: 11, name: '新疆', value: 118},
        {id: 12, name: '宁夏', value: 120},
        {id: 13, name: '河南', value: 150},
        {id: 14, name: '河北', value: 160},
        {id: 15, name: '北京', value: 167},
        {id: 16, name: '辽宁', value: 168},
        {id: 17, name: '上海', value: 120},
        {id: 18, name: '天津', value: 150},
        {id: 19, name: '厦门', value: 190},
        {id: 20, name: '香港', value: 150},
        {id: 21, name: '安徽', value: 190},
        {id: 22, name: '福建', value: 150},
        {id: 23, name: '广东', value: 190},
        {id: 24, name: '广西', value: 110},
        {id: 25, name: '青海', value: 120},
        {id: 26, name: '甘肃', value: 140}
      ],
      '2023': [
      {id: 0, name: '山西', value: 150},
        {id: 1, name: '内蒙古', value: 169},
        {id: 2, name: '浙江', value: 194},
        {id: 3, name: '江苏', value: 120},
        {id: 4, name: '四川', value: 152},
        {id: 5, name: '湖北', value: 167},
        {id: 6, name: '湖南', value: 168},
        {id: 7, name: '山东', value: 120},
        {id: 8, name: '云南', value: 130},
        {id: 9, name: '哈尔冰', value: 130},
        {id: 10, name: '西藏', value: 167},
        {id: 11, name: '新疆', value: 168},
        {id: 12, name: '宁夏', value: 190},
        {id: 13, name: '河南', value: 150},
        {id: 14, name: '河北', value: 190},
        {id: 15, name: '北京', value: 167},
        {id: 16, name: '辽宁', value: 168},
        {id: 17, name: '上海', value: 120},
        {id: 18, name: '天津', value: 150},
        {id: 19, name: '厦门', value: 190},
        {id: 20, name: '香港', value: 150},
        {id: 21, name: '安徽', value: 190},
        {id: 22, name: '福建', value: 150},
        {id: 23, name: '广东', value: 190},
        {id: 24, name: '广西', value: 110},
        {id: 25, name: '青海', value: 120},
        {id: 26, name: '甘肃', value: 150}
      ],
      '2024': [
      {id: 0, name: '山西', value: 110},
        {id: 1, name: '内蒙古', value: 129},
        {id: 2, name: '浙江', value: 199},
        {id: 3, name: '江苏', value: 120},
        {id: 4, name: '四川', value: 192},
        {id: 5, name: '湖北', value: 167},
        {id: 6, name: '湖南', value: 168},
        {id: 7, name: '山东', value: 190},
        {id: 8, name: '云南', value: 170},
        {id: 9, name: '哈尔冰', value: 180},
        {id: 10, name: '西藏', value: 167},
        {id: 11, name: '新疆', value: 168},
        {id: 12, name: '宁夏', value: 120},
        {id: 13, name: '河南', value: 150},
        {id: 14, name: '河北', value: 190},
        {id: 15, name: '北京', value: 167},
        {id: 16, name: '辽宁', value: 168},
        {id: 17, name: '上海', value: 120},
        {id: 18, name: '天津', value: 150},
        {id: 19, name: '厦门', value: 190},
        {id: 20, name: '香港', value: 150},
        {id: 21, name: '安徽', value: 190},
        {id: 22, name: '福建', value: 150},
        {id: 23, name: '广东', value: 190},
        {id: 24, name: '广西', value: 110},
        {id: 25, name: '青海', value: 120},
        {id: 26, name: '甘肃', value: 160}
      ]
    },
    colors: [
      '#1DE9B6',
      '#F46E36',
      '#04B9FF',
      '#5DBD32',
      '#DDC809',
      '#FB95D5',
      '#BDA29A',
      '#6E7047',
      '#546570',
      '#C4CCD3'
    ],
    topDate: {
      '2019': [
        {
          name: '山东',
          value: [120.33, 36.07, 120.331]
        },
        {
          name: '上海',
          value: [120.95, 31.39, 120.951]
        }
      ],
      '2020': [
        {
          name: '山东',
          value: [120.33, 36.07, 120.329]
        },
        {
          name: '上海',
          value: [120.95, 31.39, 120.952]
        }
      ],
      '2021': [
        {
          name: '山东',
          value: [120.33, 36.07, 120.329]
        },
        {
          name: '上海',
          value: [120.95, 31.39, 120.952]
        }
      ],
      '2022': [
        {
          name: '山东',
          value: [120.33, 36.07, 120.329]
        },
        {
          name: '上海',
          value: [120.95, 31.39, 120.952]
        }
      ],
      '2023': [
        {
          name: '山东',
          value: [120.33, 36.07, 120.329]
        },
        {
          name: '上海',
          value: [120.95, 31.39, 120.952]
        }
      ],
      '2024': [
        {
          name: '山东',
          value: [120.33, 36.07, 120.329]
        },
        {
          name: '上海',
          value: [120.95, 31.39, 120.952]
        }
      ],
    }
  }
  console.log('data.value', data.value)
}

loadData()

setInterval(() => {
  loadData()
}, 3000)

</script>

<template>
  <div v-if="data" class="bg-[#1e3a8a] bg-img bg-cover bg-center h-screen text-white p-5 flex overflow-hidden">
    <!-- 左 -->
    <div class="flex-1 mr-5 bg-opacity-50 bg-slate-800 p-3 flex flex-col">
      <!-- 横向柱状图 -->
      <HorizontalBar class="h-1/3 box-border pb-4" :data="data.regionData"></HorizontalBar>
      <!-- 雷达图 -->
      <RadarBar class="h-1/3 box-border pb-4" :data="data.risksData"></RadarBar>
      <!-- 关系图 -->
      <Relation class="h-1/3 box-border pb-4" :data="data.relationData"></Relation>
    </div>
    <!-- 中 -->
    <div class="w-1/2 mr-5 flex flex-col">
      <!-- 数据总览图 -->
      <TotalData class="bg-slate-800 bg-opacity-50 box-border p-3" :data="data.totalData"></TotalData>
      <!-- 地图可视化 -->
      <MapChart class="bg-slate-800 bg-opacity-50 box-border p-3 mt-4 flex-1" :data="data"></MapChart>
    </div>
    <!-- 右 -->
    <div class="flex-1 bg-opacity-50 bg-slate-800 p-3 flex flex-col">
      <!-- 横向柱状图 -->
      <VerticalBar class="h-1/3 box-border pb-4" :data="data.serversData"></VerticalBar>
      <!-- 环形图 -->
      <RingBar class="h-1/3 box-border pb-4" :data="data.eventData"></RingBar>
      <!-- 文档云 -->
      <WordCloud class="h-1/3 box-border pb-4" :data="data.wordCloudData"></WordCloud>
    </div>
  </div>
</template>

<style>
/* @tailwind base;
@tailwind components;
@tailwind utilities; */
.bg-img{
  background-image: url('https://mp-9e0b6462-8a4f-47c3-a639-4102df685259.cdn.bspapp.com/cloudstorage/092915433574_0earth.jpg');
}
</style>
